<template>
  <el-container>
    <div class="listDetail">
      <div class="listDetail-content">
        <div style="height:40px;">
          <el-button size="mini" style="float:right;" @click="$router.go(-1)">返回</el-button>
        </div>
        <div class="flexBoxWap">
          <p>商户基本信息</p>
          <el-button size="mini" style="height:28px;" v-if="flat" @click="editBase()">编辑</el-button>
        </div>
        <hr />
        <div style="display:flex">
          <div class="listDetail-content-first">
            <div v-for="v of label" :key="v.label" class="listDetail-content-first-content">
              <div style="display:flex;">
                <p style="margin-right:100px;width:150px;">{{ v.label }}：</p>
                <p>{{ v.value }}</p>
              </div>
            </div>
          </div>
          <div class="listDetail-content-first">
            <div v-for="v of label1" :key="v.label" class="listDetail-content-first-content">
              <div style="display:flex;">
                <p style="margin-right:100px;width:150px;">{{ v.label }}：</p>
                <p>{{ v.value }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flexBoxWap">
        <p>资质证照</p>
        <el-button size="mini" style="height:28px;" v-if="flat" @click="editPitures()">编辑</el-button>
      </div>
      <!-- <el-button style="float:right" type="text" size="mini" @click="editPitures()">编辑</el-button>
      <p>资质证照</p>-->
      <hr />
      <div class="pitures" style="display:flex;flex-wrap:wrap;margin-left:50px;">
        <div v-for="v of imagesData" :key="v.label" class="pitures-box">
          <div style="margin-right:20px">
            <p
              class="pitures-label"
              :style="{lineHeight: v.textType ? '20px' : '40px'}"
            >{{ v.label }}</p>
            <img :src="v.url" style="width:150px;height:150px" />
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="showEdit" title="商户基本信息" width="60%" top="6vh" center>
        <base-dialog
          v-if="showEdit"
          :visible.sync="showEdit"
          :base-data="editbaseData"
          @refresh="refresh"
        />
      </el-dialog>
      <el-dialog :visible.sync="showEditPicture" width="60%" top="6vh" center>
        <picture-dialog
          v-if="showEditPicture"
          :visible.sync="showEditPicture"
          :pictures-data="editPictureData"
          :code="codeData"
          @refresh="refreshPicture"
        />
      </el-dialog>
      <el-form ref="baseForm" class="baseForm" :model="baseForm" label-width="100px" v-if="flat">
        <el-form-item label="审核备注：" prop="remark" :rules="[{ required: true, message: '审核备注' }]">
          <el-input
            v-model="baseForm.remark"
            type="textarea"
            maxlength="100"
            placeholder="请填写审核备注"
            :autosize="{ minRows: 4, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item >
            <el-button type="primary"  @click="onSubmit('baseForm', 1)">审核通过</el-button>
            <el-button  @click="onSubmit('baseForm', 0)">审核驳回</el-button>
          </el-form-item>
      </el-form>
    </div>
  </el-container>
</template>

<script>
import baseDialog from "./editBase.vue";
import pictureDialog from "./editPictures.vue";
import { sysAjax } from "Ajax";
export default {
  name: "SCANlistDetail",
  components: {
    baseDialog,
    pictureDialog
  },
  data() {
    return {
      baseForm: {
      },
      dataList: [],
      label: [],
      label1: [],
      showEdit: false,
      showEditPicture: false,
      editbaseData: {},
      editPictureData: {},
      flat: false,
      imagesData: [],
      codeData: ''
    };
  },
  watch:{
    showEditPicture(val) {
      this.getMegssList();
    }
  },
  computed: {},
  mounted() {
    this.flat = this.$route.query.flat ==  'false' ?  false : true
    this.getMegssList();
  },
  methods: {
    getMegssList() {
      sysAjax
        .selectMerchantInfo({ code: this.$route.query.code })
        .then(data => {
          this.editbaseData = data;
          this.dataList = data;
          this.codeData = data.code
          this.imagesData = [
            {
            label: "营业执照",
            url: data.businessLicenseImg,
            type: 'businessLicenseImg'
          },
          {
            label: "法人身份证正面",
            url: data.legalPersonCardFirstImg,
            type: 'legalPersonCardFirstImg'
          },
          {
            label: "法人身份证反面",
            url: data.legalPersonCardSecondImg,
            type: 'legalPersonCardSecondImg'
          },
          {
            label: "银行卡正面",
            url: data.bankCardFirstImg,
            type: 'bankCardFirstImg'
          },
          {
            label: "银行卡反面",
            url: data.bankCardSecondImg,
            type: 'bankCardSecondImg'
          },
          {
            label: "商户门头照片",
            url: data.merchantPhotoImg,
            type: 'merchantPhotoImg'
          },
          {
            label: "内部前台照片",
            url: data.storeReception,
            type: 'storeReception'
          },
          {
            label: "店内环境照片",
            url: data.storeEnvironment,
            type: 'storeEnvironment'
          },
          {
            label: "补充材料照片",
            url: data.supplementaryAgreement,
            type: 'supplementaryAgreement'
          },
          {
            label: "开户许可证照片或对公账户信息",
            url: data.accountPermit,
            type: 'accountPermit'
          },
          {
            label: "结算人身份证正面",
            url: data.settlementPersonCardFirstImg,
            type: 'settlementPersonCardFirstImg'
          },
          {
            label: "结算人身份证反面",
            url: data.settlementPersonCardSecondImg,
            type: 'settlementPersonCardSecondImg'
          },
          ]
          
          this.label = [
            {
              label: "商户名称",
              value: data.name
            },
            {
              label: "商户简称",
              value: data.abbreviationName
            },
            {
              label: "所在地区",
              value: data.addressName
            },
            {
              label: "商户地址",
              value: ""
            },
            {
              label: "商户联系人",
              value: data.contactsName
            },
            {
              label: "联系人邮箱",
              value: data.contactsEmaill
            },
            {
              label: "联系人电话",
              value: data.mobile
            },
            {
              label: "证件类型",
              value: ""
            }
          ];
          this.label1 = [
            {
              label: "账户类型",
              value:
                data.billingType == 1
                  ? "法人对私"
                  : data.billingType == 2
                  ? "非法人对私"
                  : "对公"
            },
            {
              label: "入账类型",
              value: ""
            },
            {
              label: "结算账户开户名",
              value: data.bankAccountName
            },
            {
              label: "结算人证件号码",
              value: data.contactsCardCode
            },
            {
              label: "结算人证件有效期",
              value: data.contactsCardValidity
            },
            {
              label: "结算账户开号",
              value: ""
            },
            {
              label: "银行预留手机号",
              value: data.bankPhoneNum
            },
            {
              label: "结算开户行",
              value: data.bankAddress
            },
            {
              label: "结算开户行地址",
              value: data.bankAddress
            },
            {
              label: "结算开户支行",
              value: ""
            }
          ];
        })
        .catch(()=>{
          this.$message.error('信息错误');
          this.$router.go(-1)
        });
    },
    refresh() {},
    refreshPicture() {},
    editPitures() {
      this.showEditPicture = true;
      this.editPictureData = this.imagesData
    },
    editBase() {
      this.showEdit = true;
    },
    onSubmit(formName,state) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // editbaseData
          this.baseForm.status = state;
          this.baseForm = { ...this.editbaseData , ...this.baseForm}
         sysAjax.verifyMerchantInfo(this.baseForm).then(res=>{
          if (res.ok) {
              this.$router.go(-1)
          }
         })
        } else {
          return false;
        }
      });
      
    }
  }
};
</script>

<style scoped lang='scss'>
.listDetail {
  flex-direction: column;
  padding: 20px;
  width: 100%;
  &-content {
    border-bottom: 2px solid gray;
    width: 100%;
    &-first {
      margin-right: 90px;
      &-content {
        display: flex;
      }
    }
  }
}
.pitures {
  margin: 0 auto;
  &-box {
    height: 200px;
  }
  &-label {
    width: 150px;
    margin: 0;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    height: 40px;
  }
}
.flexBoxWap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
